<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="../../resources/cola-ui/semantic.css">
	<link rel="stylesheet" type="text/css" href="../../resources/cola-ui/cola.css">
	<script src="../../resources/jquery-2.1.3.js"></script>
	<script src="../../resources/cola-ui/3rd.js"></script>
	<script src="../../resources/cola-ui/semantic.js"></script>
	<script src="../../resources/cola-ui/cola.js"></script>
	<script src="../../resources/cola-ui/i18n/zh/cola.js"></script>

	<style>
		label {
			display: inline-block;
			width: 120px;
		}
	</style>

	<script type="text/javascript">
		cola.defaultAction.reverse = function(text) {
			return text ? text.split("").reverse().join("") : "";
		};

		cola(function (model) {
			model.set({
				numberProp: 100,
				strProp: "Shanghai",
				dateProp: "2015-06-15",
				size: 100,
				person: {
					name: "Tom",
					age: 26
				}
			});

			model.action({
				double: function (value) {
					return value * 2;
				}
			});
		});
	</script>
</head>
<body style="padding:1em;">
<p>
	<label>数字运算</label>
	<input c-bind="numberProp">
	<span c-bind="'$'+(numberProp*2)"></span>
</p>

<p>
	<label>日期格式化</label>
	<input c-bind="dateProp" type="date">
	<span c-bind="formatDate(dateProp,'MM-dd-yyyy')"></span>
</p>

<p>
	<label>内置Action</label>
	<input c-bind="strProp">
	<span c-bind="upperCase(strProp)"></span>
</p>

<p>
	<label>扩展内置Action</label>
	<input c-bind="strProp2">
	<span c-bind="reverse(strProp2)"></span>
</p>

<p>
	<label>控制Style</label>
	<input c-bind="size" type="number">
	<br>
	<div c-style="width:size*3; height:50; display:size<150?'':'none'"  style="background:#305cc5"></div>
</p>
</body>
</html>